<template>
  <div ref="abilityChart" style="width:65px; height: 65px;"></div>
</template>

<script>
export default {
  props: {
    percentage: {
      type: Number,
      default: 22.30
    }
  },
  mounted() {
    this.drawPercentageRing()
  },
  methods: {
    drawPercentageRing() {
      const chartContainer = this.$refs.abilityChart
      const chart = this.$echarts.init(chartContainer)

      const options = {
        title: {
          text: `${this.percentage}%`,
          left: "center",
          top: "center",
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },

          // subtext: '市场占比',
          subtextStyle: {
            color: '#fff',
            fontSize: 12,
          },
          //   itemGap: 10, // 主副标题距离
        },
        legend: {},
        angleAxis: {
          max: 100, // 满分
          clockwise: false, // 逆时针
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          type: 'category',
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        polar: {
          center: ['50%', '50%'],
          radius: ['45%', '100%'], //图形大小
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                name: '占比',
                value: this.percentage,
                itemStyle: {
                  normal: {
                    color: '#F76AF8'
                  },
                },
              },
            ],
            coordinateSystem: 'polar', // 变成极坐标系
            roundCap: true, // 两端变成 圆角
            barWidth: 4, // 柱子粗细
            barGap: '-100%', // 两环重叠
            z: 99, // 有数值的环置顶
          },
          {
            // 灰色环
            type: 'bar',
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#073692',
                },
              },
            ],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 4,
            barGap: '-100%', // 两环重叠
          },
        ],
      }

      chart.setOption(options)
    }
  }
}
</script>

